接續昨天的自動更新時間,來把時間轉成中文吧。
最土法煉鋼的方式就是像把星期幾轉成中文一樣,按照需求寫幾個包括所有數字的陣列,例如:
let arrDate = [ "一", "二", "三", "四", "五", "六",...(略)...,"三十一"];
但是這樣感覺要寫的中文字好多,今天試著把時間數字拆開來練習看看吧。
這個方法不一定是對的,主要的目的是練習JS。
先在方訊內列出存放資料的容器和所需陣列,並設置參數num
const intoC = num => {
let str = ''; //用來存資料
let arr = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '二十', '三十','四十','五十'];
}//注意0的位置是''
把傳入的數字拆開成十位數和個位數
let tenNum = parseInt(num / 10); //取十位數
let oneNum = parseInt(num % 10); //取個位數
個位數可以直接使用,十位數用switch case
篩選
switch (true) {
case (num >= 10 && num < 20):
tenNum = 10;
break;
case (num >= 20 && num < 30):
tenNum = 11;
break;
case (num >= 30 && num < 40):
tenNum = 12;
break;
case (num >= 40 && num < 50):
tenNum = 13;
break;
case (num >= 50):
tenNum = 14;
break;
default:
break;
}
篩選完放入準備好的容器內回傳
str = `${arr[tenNum]}${arr[oneNum]}`;
return str;
再配合昨天寫好的code就OK了。
但又會出現一個問題,秒數是有0秒存在的,預設的陣列裡沒有零。
這時就用if包住剛剛的switch把0和其他數字區分開來吧。
if (num == 0) {
str = `零`;
} else {
switch (true) {
(略)
}
str = `${arr[tenNum]}${arr[oneNum]}`;
}
完整的code
const allTime = document.querySelector('.allTime');
let showTime = () => { //不能放外面,setInterval抓不到
let date = new Date();
let year = date.getFullYear(); //取得當前年份
let month = date.getMonth() + 1; //取得月份,從0開始計算,必須+1
let today = date.getDate(); //取得日期
let week = date.getDay(); //取得星期幾
let hour = date.getHours(); //取得小時
let min = date.getMinutes(); //取得分鐘
let sec = date.getSeconds(); //取得秒數
let arr = ["日", "一", "二", "三", "四", "五", "六"]; //讀取星期幾的陣列
allTime.innerHTML = `
<p>今天是${intoC(month)}月${intoC(today)}日,<br>
時間為${intoC(hour)}時${intoC(min)}分${intoC(sec)}秒</p>`
;
}
const intoC = num => { //轉中文
// let num = 31;//測試用
let str = ''; //用來存資料
let arr = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '二十', '三十','四十','五十'];
let tenNum = parseInt(num / 10); //取十位數
let oneNum = parseInt(num % 10); //取個位數
if (num == 0) {
str = `零`;
} else {
switch (true) {
case (num >= 10 && num < 20):
tenNum = 10;
break;
case (num >= 20 && num < 30):
tenNum = 11;
break;
case (num >= 30 && num < 40):
tenNum = 12;
break;
case (num >= 40 && num < 50):
tenNum = 13;
break;
case (num >= 50):
tenNum = 14;
break;
default:
break;
}
str = `${arr[tenNum]}${arr[oneNum]}`;
}
// console.log(str);
return str;
}
// intoC();
setInterval(showTime, 1000);